<template>
    <div class="blog-list-container">
      <div class="search-filter">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索文章标题、内容或标签..."
        />
        <select v-model="sortOption">
          <option value="latest">按时间排序</option>
          <option value="likes">按点赞数排序</option>
        </select>
      </div>
      <div v-for="blog in blogs" :key="blog.id" class="blog-item">
        <!-- <h3>{{ blog.title }}</h3> -->
        <img :src="blog.image" alt="Blog Image" v-if="blog.image" style="width: 100px; margin: 30px 20px;"/>
        <p>{{ blog.content }}</p>
        <p>{{ blog.pic }}</p>
        <router-link :to="`/blog/${blog.id}`">查看详情</router-link>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import Pat1 from "../images/pat-1.png"
import Pat2 from "../images/pat-2.png"
import Pat3 from "../images/pat-3.png"
import Pat4 from "../images/pat-4.png"
  
  const blogs = ref([
    { id: 1,  content: '椰子不是抹布从今天开始就是2岁的小猫啦～  ​',image:Pat1 },
    { id: 2, content: '东野先生的信箱 这个世界不能没有小猫咪  ​',image:Pat2 },
    { id: 3, content: '领导我是小明    怎么捏小狗的脸也不会生气 ​​' ,image:Pat3},
    { id: 4, content: '李尾鱼o  可以申请成为你的圣诞小猫吗 ​​' ,image:Pat4},
    
])
  </script>
  
  <style scoped>
  .search-filter {
    margin-bottom: 20px;
  }
  
  .search-filter input {
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .search-filter select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .blog-list-container {
    padding: 20px;
  }
  
  .blog-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  </style> 